<!--职务选择框-->
<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      :title="modalTitle"
      width="1300px"
      wrapClassName="j-user-select-modal"
      @ok="handleOk"
      destroyOnClose
      @visible-change="visibleChange"
    >
      <a-row>
        <a-col :span="showSelected ? 18 : 24">
          <BasicTable
          ref="tableRef"
            :columns="columns"
            :bordered="true"
            :useSearchForm="false"
            :api="personListTree"
			:showIndexColumn="false"
			:striped="true"
			:isTreeTable=true
			:defaultExpandAll="true"
			:defaultExpandAllRows="true"
			:searchInfo="searchInfo"
			:pagination="false"
			:clickToRowSelect="false"
            :rowSelection="rowSelection"
            :indexColumnProps="indexColumnProps"
            v-bind="getBindValue"
            @register="BasicTableRegister"
          >
           <template #toolbar>
            <a-button type="primary" @click="handleExpandAll">展开全部</a-button>
            <a-button type="primary" @click="handleCollapseAll">折叠全部</a-button>
          </template>
		  </BasicTable>
        </a-col>
        
      </a-row>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref,getCurrentInstance } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { personListTree } from '../SsDevice.api';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
      // const instance = getCurrentInstance()

  export default defineComponent({
    name: 'PersonSelectModal',
    components: {
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
        loading: true,
      }),
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: '人员选择',
      },
    },
    emits: ['register', 'getSelectResult'],
    
    setup(props, { emit, refs }) {
      //注册弹框
      const [register, { closeModal }] = useModalInner(async(data)=>{
        console.log('11111111参数');
        console.log(data);
        searchInfo.value = data.data
        // setProps({ searchInfo: data.data });

      });
    
      const tableRef = ref('')
     
      const attrs = useAttrs();
      //表格配置
      const config = {
        canResize: false,
        bordered: true,
        size: 'small',
        //改成读取rowKey,自定义传递参数
        rowKey: props.rowKey,
        defaultExpandAllRows: true
      };
  // const [registerTable, {reload,getForm,setProps},{  }] = tableContext

      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
      const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, selectRows }] = useSelectBiz(
        personListTree,
        getBindValue
      );
      const searchInfo = ref(props.params);
      //定义表格列
      const columns = [
        {
          title: '楼层',
          dataIndex: 'storeyName',
          width: 180,
        },
        {
          title: '房间',
          dataIndex: 'roomCode',
          // width: 180,
        },
        {
          title: '学号',
          dataIndex: 'code',
          width: 180,
          align: 'left',
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 180,
          align: 'left',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          width: 180,
          align: 'left',
        },
		{
		  label: '',
		  field: 'id',
		  component: 'Input',
		  show: false
		},
      ];
      //已选择的table信息
      const selectedTable = {
        pagination: false,
        showIndexColumn: false,
        scroll: { y: 390 },
        size: 'small',
        canResize: false,
        bordered: true,
        rowKey: 'id',
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            width: 40,
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            width: 40,
            slots: { customRender: 'action' },
          },
        ],
      };
      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit('getSelectResult', options, values);
          //关闭弹窗
          closeModal();
        });
      }
      //  const personRef = ref();
    // const tableRefs = {personRef, };

      function handleExpandAll(){
        tableRef.value.expandAll()
      }
      function handleCollapseAll(){
        tableRef.value.collapseAll()
      }

      return {
        tableRef,
        // instance,
        handleCollapseAll,
        handleExpandAll,
        handleOk,
        personListTree,
        register,
        visibleChange,
        getBindValue,
        indexColumnProps,
        columns,
        rowSelection,
        selectedTable,
        selectRows,
        searchInfo,
      };
    },
  });
</script>
